<template>
	<div>
		<el-row class="el">
			<el-button type="primary" icon="el-icon-plus" plain @click="add = true">增加</el-button>
			<el-dialog title="增加" :visible.sync="add">
				<el-form :label-position="labelPosition" :model="form" class="form" style="height: 650px;">
					<el-form-item label="id">
						<el-input v-model="form.id"></el-input>
					</el-form-item>
					<el-form-item label="状态">
						<el-select v-model="form.region" placeholder="请选择状态">
							<el-option label="启用" value="qiyong"></el-option>
							<el-option label="停用" value="tingyong"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="单位编码">
						<el-input v-model="form.recId"></el-input>
					</el-form-item>
					<el-form-item label="单位名称">
						<el-input v-model="form.recName"></el-input>
					</el-form-item>
					<el-form-item label="单位电话">
						<el-input v-model="form.recPhone"></el-input>
					</el-form-item>
					<el-form-item label="首要联系人">
						<el-input v-model="form.recContact"></el-input>
					</el-form-item>
					<el-form-item label="联系人手机">
						<el-input v-model="form.contactPhone"></el-input>
					</el-form-item>
					<el-form-item label="单位地址">
						<el-input v-model="form.recAddress"></el-input>
					</el-form-item>
					<el-form-item label="单位类别">
						<el-input v-model="form.recClass"></el-input>
					</el-form-item>
					<el-form-item label="单位类别">
						<el-input v-model="form.recClass"></el-input>
					</el-form-item>
					<el-form-item label="登记日期">
						<el-col :span="11">
							<el-date-picker type="date" placeholder="选择日期" v-model="form.recRegistrationData" style="width: 100%;"></el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="创建日期">
						<el-col :span="11">
							<el-date-picker type="date" placeholder="选择日期" v-model="form.recCreationData" style="width: 100%;"></el-date-picker>
						</el-col>
					</el-form-item>
					<el-form-item label="员工ID">
						<el-input v-model="form.eid"></el-input>
					</el-form-item>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="add = false">取 消</el-button>
					<el-button type="primary" @click="add = false">确 定</el-button>
				</div>
			</el-dialog>
			<el-button type="warning" icon="el-icon-edit" plain>修改</el-button>
			<el-button type="danger" icon="el-icon-delete" plain>删除</el-button>
			<el-button type="success" icon="el-icon-search" plain>查询</el-button>
			<el-button type="success" icon="el-icon-reading" plain>查看</el-button>
			<el-button type="danger" icon="el-icon-document-delete" plain>停用</el-button>
			<el-button type="danger" icon="el-icon-document-checked" plain>启用</el-button>
		</el-row>
		<div style="margin-top: 5px; width: 400px;">
			<el-input placeholder="快捷查询" v-model="keywords" class="input-with-select">
				<el-button slot="append" icon="el-icon-search" @click="searchClick"></el-button>
			</el-input>
		</div>
		<template>
			<el-table :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" border style="width: 100%"
			 highlight-current-row>
				<el-table-column prop="id" width="40">
				</el-table-column>
				<el-table-column prop="recState" label="状态" width="80">
				</el-table-column>
				<el-table-column prop="recId" label="单位编码" width="100">
				</el-table-column>
				<el-table-column prop="recName" label="单位名称" width="120">
				</el-table-column>
				<el-table-column prop="recPhone" label="单位电话" width="200">
				</el-table-column>
				<el-table-column prop="recContact" label="首要联系人" width="150">
				</el-table-column>
				<el-table-column prop="contactPhone" label="联系人手机" width="150">
				</el-table-column>
				<el-table-column prop="recAddress" label="单位地址" width="300">
				</el-table-column>
				<el-table-column prop="recClass" label="单位类别" width="100">
				</el-table-column>
				<el-table-column prop="recRegistrationData" label="登记日期" width="120" :formatter="dateFormat">
				</el-table-column>
				<el-table-column prop="recCreationData" label="创建日期" width="120" :formatter="dateFormat">
				</el-table-column>
				<el-table-column prop="eid" label="员工ID" width="120">
				</el-table-column>
			</el-table>
		</template>
		<template>
			<div class="block">
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
				 :page-sizes="[5, 10, 20, 50]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.length">
				</el-pagination>
			</div>
		</template>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				labelPosition:'left',
				currentPage: 1, //初始页
				pagesize: 5, //    每页的数据
				keywords: '',
				select: '',
				formLabelWidth: '120px',
				tableData: [],
				currentRow: null,
				add: false,
				form: {
					id: '',
					recState: '',
					recId: '',

					type: []
				},
			}
		},
		mounted: function() {
			this.initCards();
		},
		created() {
			this.$axios.post("info").then(v => {
				console.log(v)
				if (v.data) {
					this.tableData = v.data;
				} else {
					alert("出错了！");
				}
			}).catch(ex => {
				alert("出错了！" + ex);
			})
		},
		components: {},
		methods: {
			dateFormat(row, column, cellValue, index) {
				const daterc = row[column.property]
				if (daterc != null) {
					const dateMat = new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
					const year = dateMat.getFullYear();
					const month = dateMat.getMonth() + 1;
					const day = dateMat.getDate();
					const hh = dateMat.getHours();
					const mm = dateMat.getMinutes();
					const ss = dateMat.getSeconds();
					const timeFormat = year + "/" + month + "/" + day + " " + hh + ":" + mm + ":" + ss;
					return timeFormat;
				}
			},

			handleSizeChange: function(size) {
				this.pagesize = size;
				console.log(this.pagesize) //每页下拉显示数据
			},
			handleCurrentChange: function(currentPage) {
				this.currentPage = currentPage;
				console.log(this.currentPage) //点击第几页
			},
			searchClick() {
				this.initCards();
			},
			initCards() {
				var _this = this;
				var searchWords;
				if (this.keywords === '') {
					searchWords = 'all';
				} else {
					searchWords = this.keywords;
				}
				this.$axios.get("/info/" + searchWords).then(resp => {
					console.log(resp)
					if (resp.data) {
						let r = resp.data;
						if (r.code == 1) {
							_this.users = r.data;
							var length = r.data.length;
							this.tableData = r.data;
							_this.cardLoading = Array.apply(null, Array(length)).map(function(item, i) {
								return false;
							});
							_this.eploading = Array.apply(null, Array(length)).map(function(item, i) {
								return false;
							});
						}
					} else {
						_this.$message.error(r.msg);
					}
				}).catch(ex => {
					alert("出错了!" + ex);
				})
			},
		},
	}
</script>

<style>
	.el {
		background: lavender;
	}

	.el-select .el-input {
		width: 130px;
	}

	.input-with-select .el-input-group__prepend {
		background-color: #fff;
	}

	.el .el-button {
		float: left;
	}

	.form .el-form-item{
		float: left;
		display: block;
		height: 100px;
		width: 400px;
		margin-left: 20px;
		margin-right: 20px;
		margin-bottom: 0px;
	}

	.dialog-footer .el-button {
		float: none;
	}
</style>
